import React, { useEffect, useState } from 'react'
import { ArrowLeft, ClockO } from '@react-vant/icons';
import { useNavigate, useParams } from 'react-router-dom';
import { Sticky, Button } from 'react-vant'
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
export default function MessageDetails() {
  const navigate = useNavigate()
  const [list, setList] = useState([])
  const { id } = useParams()
  useEffect(() => {
    getfollowup()
  }, [])
  const getfollowup = async () => {
    let { data: { data } } = await axios.get('/getfollowup')
    setList(data.filter(i => i._id === id))
  }
  const jump = () => {
    return navigate('/followup')
  }
  return (
    <div style={{ height: '100vh', width: '100%', background: '#F2F2F2' }}>
      {
        list.map(i => {
          if (i.sid.name === "待接诊") {
            return <div key={i._id} style={{ height: '100%', width: '100%', background: 'white' }}>
              <p style={{ padding: '7px', width: '100%', lineHeight: '30px', display: 'flex', alignItems: 'center', fontSize: '23px', borderBottom: '1px solid #CECECE' }}> <ArrowLeft onClick={() => { jump() }} />{i.patientname}</p>
              <div style={{ padding: '15px', background: '#0079FE', color: 'white', display: 'flex', alignItems: 'center', }}><ClockO fontSize={23} /><span style={{ paddingLeft: '5px' }}>{i.sid.name}</span></div>
              <br />
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <p style={{ marginLeft: '10px', fontSize: '18px' }}>{i.department}</p>
                <p style={{ marginRight: '10px', color: 'red', fontSize: '18px' }}>￥5</p>
              </div>
              <br />
              <p style={{ marginLeft: '10px' }}>
                病情描述：<span>
                  {i.content}
                </span>
              </p>
              <br />
              <div style={{ marginLeft: '10px' }}>
                <p>已选药品及用药情况</p>
                <br />
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around' }}>
                  <img src={'../' + i.img} alt="" style={{ width: '50px', height: '50px' }} />
                  <div>
                    <span>{i.medicinename}</span>
                    <span>{i.specification}</span>
                    <span style={{ color: 'red' }}>￥{i.price}</span>
                  </div>
                  <p>{i.medicinenumber}X</p>
                </div>
                <p>用药情况：{i.condition}</p>
              </div>
              <div style={{ marginLeft: '10px' }}>
                <p>患者情况</p>
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                  <span>患者信息</span>
                  <span>{i.patientname}</span>
                  <span>{i.patientsex}</span>
                  <span>{i.patientage}</span>
                </div>
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                  <span>所患疾病</span>
                  <span>{i.patientdisease}</span>
                </div>
              </div>
              <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                <span>肝功能</span>
                <span>正常</span>
              </div>

              <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                <span>肾功能</span>
                <span>正常</span>
              </div>
              <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                <span>过敏史</span>
                <span>无</span>
              </div>
              <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                <span>生育计划或状态</span>
                <span>无</span>
              </div>
              <Button style={{ width: '150px', margin: '20px auto' }} type='primary' block round>查看原始处方</Button>
              <div style={{ width: '90%', zIndex: '999', display: 'flex', alignItems: 'center', justifyContent: 'space-around', margin: '20px auto' }}>
                <p style={{ color: '#9999B0' }}>────</p>
                <div> <p style={{ color: '#9999B0', fontSize: '15px' }}>问诊已开始，本次问诊可持续24小时</p></div>
                <p style={{ color: '#9999B0' }}>────</p>
              </div>
              <Sticky position="bottom" offsetBottom={0} key={i._id}>
                <div style={{ backgroundColor: 'white', height: '200px', border: '1px solid #CECECE', display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
                  <div style={{ border: '3px solid #86C6F4', borderRadius: '50%', width: '60px', height: '60px', textAlign: 'center', lineHeight: '60px' }}>
                    <svg style={{ marginTop: '15px' }} t="1725193257772" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4321" width="30" height="30"><path d="M878.53056 0H147.101989a146.285714 146.285714 0 0 0-146.285715 146.285714v146.285715a36.571429 36.571429 0 0 0 36.571429 36.571428A37.302857 37.302857 0 0 0 73.959131 292.571429V146.285714a73.142857 73.142857 0 0 1 73.142858-73.142857h731.428571a73.142857 73.142857 0 0 1 73.142857 73.142857v731.428572a73.142857 73.142857 0 0 1-73.142857 73.142857H147.101989a73.142857 73.142857 0 0 1-73.142858-73.142857v-146.285715a36.571429 36.571429 0 0 0-36.571428-36.571428 36.571429 36.571429 0 0 0-36.571429 36.571428v146.285715a146.285714 146.285714 0 0 0 146.285715 146.285714h731.428571a146.285714 146.285714 0 0 0 146.285714-146.285714V146.285714a146.285714 146.285714 0 0 0-146.285714-146.285714z" fill="#108EE9" p-id="4322"></path><path d="M695.673417 474.697143H126.621989l195.291428-195.291429a36.571429 36.571429 0 1 0-51.931428-51.931428L13.25056 484.205714a31.451429 31.451429 0 0 0-12.434286 13.897143A29.988571 29.988571 0 0 0 0.816274 512a34.377143 34.377143 0 0 0 10.971429 25.6l258.194286 258.925714a36.571429 36.571429 0 1 0 51.931428-51.931428L125.89056 548.571429H695.673417A36.571429 36.571429 0 0 0 732.244846 512a36.571429 36.571429 0 0 0-36.571429-37.302857z" fill="#108EE9" p-id="4323"></path></svg>
                    <p>退诊</p>
                  </div>
                  <div style={{ background: '#86C6F4', borderRadius: '50%', width: '60px', height: '60px', textAlign: 'center', lineHeight: '60px' }}>
                    <svg style={{ marginTop: '15px' }} t="1725194286492" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24857" width="30" height="30"><path d="M515.674692 636.784005c43.485771 0 78.723645-33.797948 78.723645-75.463652L594.398337 75.50845C594.397057 33.797948 559.160463 0 515.674692 0s-78.723645 33.797948-78.723645 75.50845l0 485.810622C436.951046 602.986057 472.18764 636.784005 515.674692 636.784005z" fill="#ffffff" p-id="24858"></path><path d="M836.09091 214.232861c-32.420738-27.756657-82.188428-25.064955-111.132864 6.064329-28.939317 31.096006-26.100422 78.814521 6.336955 106.571178 67.077522 57.56633 109.045291 140.413924 109.07345 233.376839-0.307184 172.715628-146.017477 312.470386-326.088888 312.748132-180.066292-0.279026-325.798343-140.032503-326.083768-312.748132 0.023039-93.400653 42.382468-176.550312 109.995003-234.1384 32.552572-27.631224 35.543778-75.366377 6.729895-106.54174-28.843322-31.20992-78.563654-34.098732-111.093186-6.44575l-0.023039-0.039678C94.011822 297.780579 30.716506 422.260599 30.744664 560.245207 30.790742 816.406159 247.21357 1023.960322 514.280843 1024c267.060873-0.039678 483.484981-207.595121 483.524659-463.754793C997.832381 422.857049 935.134794 298.862123 836.09091 214.232861z" fill="#ffffff" p-id="24859"></path></svg>
                    <p>接诊</p>
                  </div>
                </div>
              </Sticky>
            </div>
          } else if (i.sid.name === "进行中") {
            return list.map(i => {
              return <div key={i._id} style={{ height: '100%', width: '100%', background: 'white' }}>
                <p style={{ padding: '7px', width: '100%', lineHeight: '30px', display: 'flex', alignItems: 'center', fontSize: '23px', borderBottom: '1px solid #CECECE' }}> <ArrowLeft onClick={() => { jump() }} />{i.patientname}</p>
                <div style={{ padding: '15px', background: '#0079FE', color: 'white', display: 'flex', alignItems: 'center', }}><ClockO fontSize={23} /><span style={{ paddingLeft: '5px' }}>{i.sid.name}</span></div>
                <br />
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <p style={{ marginLeft: '10px', fontSize: '18px' }}>{i.department}</p>
                  <p style={{ marginRight: '10px', color: 'red', fontSize: '18px' }}>￥5</p>
                </div>
                <br />
                <p style={{ marginLeft: '10px' }}>
                  病情描述：<span>
                    {i.content}
                  </span>
                </p>
                <br />
                <div style={{ marginLeft: '10px' }}>
                  <p>已选药品及用药情况</p>
                  <br />
                  <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around' }}>
                    <img src={'../' + i.img} alt="" style={{ width: '50px', height: '50px' }} />
                    <div>
                      <span>{i.medicinename}</span>
                      <span>{i.specification}</span>
                      <span style={{ color: 'red' }}>￥{i.price}</span>
                    </div>
                    <p>{i.medicinenumber}X</p>
                  </div>
                  <p>用药情况：{i.condition}</p>
                </div>
                <div style={{ marginLeft: '10px' }}>
                  <p>患者情况</p>
                  <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                    <span>患者信息</span>
                    <span>{i.patientname}</span>
                    <span>{i.patientsex}</span>
                    <span>{i.patientage}</span>
                  </div>
                  <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                    <span>所患疾病</span>
                    <span>{i.patientdisease}</span>
                  </div>
                </div>
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                  <span>肝功能</span>
                  <span>正常</span>
                </div>

                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                  <span>肾功能</span>
                  <span>正常</span>
                </div>
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                  <span>过敏史</span>
                  <span>无</span>
                </div>
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                  <span>生育计划或状态</span>
                  <span>无</span>
                </div>
                <Button style={{ width: '150px', margin: '20px auto' }} type='primary' block round>查看原始处方</Button>
                <div style={{ width: '90%', zIndex: '999', display: 'flex', alignItems: 'center', justifyContent: 'space-around', margin: '20px auto' }}>
                  <p style={{ color: '#9999B0' }}>────</p>
                  <div> <p style={{ color: '#9999B0', fontSize: '15px' }}>问诊已开始，本次问诊可持续24小时</p></div>
                  <p style={{ color: '#9999B0' }}>────</p>
                </div>
                <Sticky position="bottom" offsetBottom={0}>
                  <div style={{ backgroundColor: 'white', height: '200px', border: '1px solid #CECECE' }}>
                    <br />
                    <div>
                      <input type="text" placeholder='请回复患者' style={{ boxShadow: '0 0 10px #cecece', border: '1px solid #cecece', width: '300px', height: '35px', borderRadius: '20px', marginLeft: '20px', marginTop: '10px' }} />
                      <button style={{ marginLeft: '20px', border: '1px solid black', padding: '10px', background: 'white', width: '60px' }}>发送</button>
                    </div>
                    <br />
                    <br />
                    <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-around', marginTop: '20px' }}>
                    <svg t="1725238733920" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4289" width="30" height="30"><path d="M512 608 512 608c88 0 160-72 160-160L672 256c0-88-72-160-160-160l0 0c-88 0-160 72-160 160l0 192C352 536 424 608 512 608z" p-id="4290"></path><path d="M796.6 492.4c2.7-17.5-9.2-33.8-26.7-36.5-17.5-2.6-33.8 9.3-36.5 26.7C716.6 590.6 621.5 672 512 672c-109.5 0-204.7-81.5-221.4-189.5-2.7-17.5-19.1-29.4-36.5-26.7-17.5 2.7-29.4 19-26.7 36.5 20.2 130.5 124 227.8 252.6 241.8L480 832l-96 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l256 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0 0-97.9C672.5 720.1 776.4 622.9 796.6 492.4z" p-id="4291"></path></svg>
                    <svg t="1725238802521" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5340" width="30" height="30"><path d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z m0 960C265 960 64 759 64 512S265 64 512 64s448 201 448 448-201 448-448 448z" p-id="5341"></path><path d="M320 405.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="5342"></path><path d="M704 405.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="5343"></path><path d="M512 810.7c117.8 0 213.3-95.5 213.3-213.3H298.7c0 117.8 95.5 213.3 213.3 213.3z" p-id="5344"></path></svg>
                    <svg t="1725239006834" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18773" width="30" height="30"><path d="M310.272 198.656q19.456 0 37.376 7.68t30.72 20.48 20.48 30.208 7.68 36.864q0 39.936-28.16 67.584t-68.096 27.648q-19.456 0-36.864-7.168t-30.208-20.48-20.48-30.208-7.68-37.376q0-19.456 7.68-36.864t20.48-30.208 30.208-20.48 36.864-7.68zM875.52 49.152q52.224 0 74.24 29.184t22.016 76.288l0 735.232q0 14.336-6.656 29.184t-18.432 26.112-27.136 18.432-33.792 7.168l-754.688 0q-31.744 0-55.808-25.6t-24.064-61.44l0-749.568q0-36.864 20.48-60.928t54.272-24.064l749.568 0zM879.616 168.96q0-11.264-8.704-19.968t-20.992-8.704l-677.888 0q-12.288 0-20.48 8.704t-8.192 19.968l0 1.024 0 366.592q10.24 12.288 27.136 28.16t39.936 29.696 52.224 23.552 65.024 9.728q55.296 0 97.28-17.92t79.36-44.032 73.216-57.344 78.336-58.368 96.768-46.08 126.976-22.016l0-212.992z" p-id="18774"></path></svg>
                    <svg t="1725239081175" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20848" width="30" height="30"><path d="M759.9 662.4c-12.6-9.4-31.5-9.4-40.9 3.1l-72.3 69.2c-9.4 9.4-25.2 12.6-37.7 6.3-69.2-37.7-132.1-84.9-185.6-138.4-53.5-53.4-100.7-116.3-138.4-185.5-6.3-12.6-3.1-28.3 6.3-37.7l72.3-72.3c12.6-12.6 12.6-28.3 3.1-40.9L266.1 143.4s0-3.1-3.1-3.1c-12.6-12.6-31.5-12.6-44 0l-85 84.9c-40.9 40.9 62.9 235.9 245.4 421.5S759.9 932.9 800.8 892l84.9-84.9 3.1-3.1c9.4-12.6 9.4-34.6-6.3-44l-122.6-97.6z m-84.9-44c34.6-34.6 88.1-37.7 125.8-6.3l122.7 97.5c40.9 31.5 47.2 91.2 15.7 132.1-3.1 3.1-3.1 6.3-6.3 6.3L848 932.9c-81.8 81.8-302-34.6-512.7-245.4S11.3 259.8 89.9 178l84.9-84.9c37.7-37.7 97.5-37.7 132.1 0l6.3 6.3L410.8 222c31.5 37.7 28.3 91.2-6.3 125.8L351 401.3c34.6 56.6 72.3 106.9 116.4 151s94.4 81.8 151 116.4l56.6-50.3zM564.9 193.7c-18.9 0-31.5-12.6-31.5-31.5s12.6-31.5 31.5-31.5c173 0 314.6 141.5 314.6 314.6 0 18.9-12.6 31.5-31.5 31.5s-31.5-12.6-31.5-31.5c0.1-138.3-113.2-251.6-251.6-251.6z m0 125.8c-18.9 0-31.5-12.6-31.5-31.5s12.6-31.5 31.5-31.5c103.8 0 188.7 84.9 188.7 188.7 0 18.9-12.6 31.5-31.5 31.5s-31.5-12.6-31.5-31.5c0.1-69-56.5-125.7-125.7-125.7z" p-id="20849"></path></svg>
                    <svg t="1725239103934" className="icon" viewBox="0 0 1087 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21894" width="30" height="30"><path d="M768 415.744q0 5.12-10.752 17.92t-23.04 30.208-23.04 37.888-10.752 41.984 10.752 41.472 23.04 36.352 23.04 27.136 10.752 13.824l0 107.52q0 17.408-12.8 39.424t-31.744 41.472-41.984 32.256-43.52 12.8l-508.928 0q-27.648 0-50.688-9.728t-40.448-27.136-27.136-40.96-9.728-51.2l0-441.344q0-20.48 9.216-42.496t26.112-40.448 39.936-30.72 50.688-12.288l508.928 0q27.648 0 51.712 9.728t41.984 26.624 28.16 40.448 10.24 50.176l0 89.088zM1086.464 319.488l0 467.968q0 22.528-11.776 39.936t-35.328 17.408q-8.192 0-20.992-6.144t-25.6-14.336-24.064-16.384-16.384-13.312q-13.312-11.264-40.448-38.912t-54.784-62.464-48.64-71.68-20.992-67.584 22.528-70.144 54.272-77.312 66.56-70.144 58.368-48.64q9.216-6.144 25.088-14.848t28.16-8.704q27.648 0 35.84 15.36t8.192 37.888l0 2.048z" p-id="21895"></path></svg>
                    <svg t="1725241131938" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5418" width="30" height="30"><path d="M256 653.44h362.666667a21.333333 21.333333 0 0 0 0-42.666667H256a21.333333 21.333333 0 0 0 0 42.666667zM256 376.106667h149.333333a21.333333 21.333333 0 0 0 0-42.666667h-149.333333a21.333333 21.333333 0 0 0 0 42.666667zM454.186667 527.146667a21.333333 21.333333 0 0 0 30.08 0l448-448a21.333333 21.333333 0 0 0-30.08-30.08l-448 448a21.333333 21.333333 0 0 0 0 30.08z" fill="#666666" p-id="5419"></path><path d="M909.44 342.613333a21.333333 21.333333 0 0 0-21.333333 21.333334V874.666667A51.2 51.2 0 0 1 832 930.773333H192c-35.2 0-71.893333-21.333333-71.893333-55.893333V149.333333A78.506667 78.506667 0 0 1 192 77.44h422.613333a21.333333 21.333333 0 0 0 0-42.666667H192A120.96 120.96 0 0 0 77.44 149.333333v725.333334c0 58.88 55.893333 98.773333 114.773333 98.773333H832A93.653333 93.653333 0 0 0 930.773333 874.666667V363.946667a21.333333 21.333333 0 0 0-21.333333-21.333334z" fill="#666666" p-id="5420"></path></svg>
                    </div>
                  </div>
                </Sticky>
              </div>
            })
          } else {
            return list.map(i=>{
              return <div key={i._id} style={{ height: '100%', width: '100%', background: 'white' }}>
              <p style={{ padding: '7px', width: '100%', lineHeight: '30px', display: 'flex', alignItems: 'center', fontSize: '23px', borderBottom: '1px solid #CECECE' }}> <ArrowLeft onClick={() => { jump() }} />{i.patientname}</p>
              <div style={{ padding: '15px', background: '#0079FE', color: 'white', display: 'flex', alignItems: 'center', }}><ClockO fontSize={23} /><span style={{ paddingLeft: '5px' }}>{i.sid.name}</span></div>
              <br />
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <p style={{ marginLeft: '10px', fontSize: '18px' }}>{i.department}</p>
                <p style={{ marginRight: '10px', color: 'red', fontSize: '18px' }}>￥5</p>
              </div>
              <br />
              <p style={{ marginLeft: '10px' }}>
                病情描述：<span>
                  {i.content}
                </span>
              </p>
              <br />
              <div style={{ marginLeft: '10px' }}>
                <p>已选药品及用药情况</p>
                <br />
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around' }}>
                  <img src={'../' + i.img} alt="" style={{ width: '50px', height: '50px' }} />
                  <div>
                    <span>{i.medicinename}</span>
                    <span>{i.specification}</span>
                    <span style={{ color: 'red' }}>￥{i.price}</span>
                  </div>
                  <p>{i.medicinenumber}X</p>
                </div>
                <p>用药情况：{i.condition}</p>
              </div>
              <div style={{ marginLeft: '10px' }}>
                <p>患者情况</p>
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                  <span>患者信息</span>
                  <span>{i.patientname}</span>
                  <span>{i.patientsex}</span>
                  <span>{i.patientage}</span>
                </div>
                <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                  <span>所患疾病</span>
                  <span>{i.patientdisease}</span>
                </div>
              </div>
              <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                <span>肝功能</span>
                <span>正常</span>
              </div>

              <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                <span>肾功能</span>
                <span>正常</span>
              </div>
              <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                <span>过敏史</span>
                <span>无</span>
              </div>
              <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'space-around', width: '50%' }}>
                <span>生育计划或状态</span>
                <span>无</span>
              </div>
              <Button style={{ width: '150px', margin: '20px auto' }} type='primary' block round>查看原始处方</Button>
              <div style={{ width: '90%', zIndex: '999', display: 'flex', alignItems: 'center', justifyContent: 'space-around', margin: '20px auto' }}>
                <p style={{ color: '#9999B0' }}>────</p>
                <div> <p style={{ color: '#9999B0', fontSize: '15px' }}>问诊已结束，医生将发送您诊断结果</p></div>
                <p style={{ color: '#9999B0' }}>────</p>
              </div>
            </div>
            })
          }
        })
      }
    </div>
  )
}
